<template>
  <section class="chart-container systemManage">
    <div class="content">
      <div class="main-content">
        <div>
          <div class="search_c">
            <p class="billlist">
              <span>姓名：<input type="text" v-model="username"></span>
              <span>机构：
                <select name="" class="selectC" v-model="userjigou">
                  <option :value="undefined||''" selected style="display:none;">请选择</option>
                  <option v-for="item in jigouList" :key="item.id" :value="item.hash.orgid">{{(item.hash.orgname).replace(/;/g, "&nbsp;")}}</option>
                </select>
              </span>
              <span>电话：<input type="text" v-model="usertel"></span>
              <el-button size="mini" @click="getUserList('1')" type="primary" style="padding:7px 15px">搜索</el-button>
              <!-- <el-button size="mini" type="primary" @click="goAddUser" style="padding:7px 15px;float:right">添加新用户</el-button> -->
            </p>

          </div>
          <div class="cont">
            <table width="100%" style="background:#fff">
              <thead>
                <tr>
                  <th>工号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
                  <!-- <th>邮箱</th> -->
                  <th>电话</th>
                  <th>所在机构</th>
                  <th>微信ID</th>
                  <th>角色</th>
                  <th width="320px">状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pages[num-1]" :key="item.id">
                  <td>{{item.hash.userid}}</td>
                  <td>{{item.hash.username}}</td>
                  <td>{{item.hash.sex}}</td>
                  <td>{{item.hash.age}}</td>
                  <!-- <td>{{item.hash.email}}</td> -->
                  <td>{{item.hash.telephone}}</td>
                  <td>{{item.hash.orgname}}</td>
                  <td>{{item.hash.openid}}</td>
                  <td>{{item.hash.rname}}</td>
                  <td>
                    <!-- <span @click="viewUserInfo(item.hash.pid)">查看</span>
                    <span @click="modifyUserInfo(item.hash.pid)">修改</span> -->
                    <span @click="resetmm(item.hash.pid)">重置密码</span>

                    <span @click="changeUserRole(item.hash.pid)">角色</span>
                    <!-- <span @click="deleteUserItem(index,item.hash.pid)" style="border-right:0;font-size:14px">删除</span> -->
                  </td>
                </tr>
              </tbody>
            </table>
            <el-pagination
              @current-change="handleCurrentChange"
              :currentPage.sync="currentPage"
              :pageSize="pagesize"
              layout="total, prev, pager, next, jumper"
              :total="total"
              style="text-align:center;margin-top:20px"
            ></el-pagination>
            <!-- <div class="pagination-wrapper">
              <pagination :groups="groups" :pages="pages" :current.sync="group" @navpage="pageListView"
                @navgroup="groupListView"
                ref="pagi"
              ></pagination>
              <div class="desc">

                <span>当前是第<i v-text="num"></i>页，共<i v-text="pages.length"></i>页</span>
              </div>
            </div> -->
          </div>
          <el-dialog title="用户管理" :visible.sync="dialogTableVisible" width="65%">
            <div class="addInfo">
              <div class="title">用户信息<b style="color:#f60" v-show="showSubmit">(新建的用户初始密码为 123456)</b></div>
              <table width="95%">
                <tbody>
                  <tr>
                    <td>工号:</td>
                    <td><input type="text" v-model="newUserId"></td>
                    <td>员工姓名:</td>
                    <td><input type="text" v-model="newUserName"></td>
                  </tr>
                  <tr>
                    <td>性别:</td>
                    <td>
                      <input type="radio" id="one" value="男" :checked ="male"
                        v-model="newUserSex"
                      >
                      <label for="one">男</label>
                      <input type="radio" id="two" value="女" :checked ="female"
                        v-model="newUserSex"
                      >
                      <label for="two">女</label>
                    </td>
                    <td>年龄:</td>
                    <td><input type="text" v-model="newUserAge"></td>
                  </tr>
                  <tr>
                    <td>所在机构:</td>
                    <td>
                      <select v-model="newUserJigou">

                        <option v-for="item in jigouList" :key="item.id" :value="item.hash.orgid">
                          {{(item.hash.orgname).replace(/;/g, "&nbsp;")}}
                        </option>
                      </select>
                    </td>
                    <td>职务:</td>
                    <td>
                      <input type="text" v-model="newUserPosition">
                    </td>
                  </tr>
                  <tr>
                    <td>邮箱:</td>
                    <td><input type="text" v-model="newUserEmail"></td>
                    <td>电话:</td>
                    <td><input type="text" v-model="newUserTel"></td>
                  </tr>
                  <!-- <tr>
                    <td>设置密码:</td>
                    <td colspan="3"><input type="text" v-model="newUserPwd"></td>
                  </tr> -->
                  <tr>
                    <td colspan="4" @click="addNewUser" v-show="showSubmit"><span>提交</span></td>
                    <td colspan="4" @click="modifyUserSubmit(nowPid)" v-show="showXiugaiSubmit"><span>提交</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-dialog>
          <el-dialog :visible.sync="dialogTableVisible2" width="85%" title="用户管理">
            <div class="show-role">
              <div class="title">修改用户角色</div>
              <div class="title">您修改的是【{{newUserName}}】的使用权限!</div>
              <div class="list">
                <span
                  v-for="(item, index) in userRoleList"
                  :key="item.id"
                >
                  <input type="checkbox" :id="index" :value="item.hash.rid"
                    v-model="RoleRids"
                  >
                  <label :for="index">{{item.hash.rname}}</label>
                </span>
              </div>
              <el-button size="mini" type="primary" @click="submitUserRole(nowPid)">修改</el-button>
            </div>
          </el-dialog>

        </div>
      </div>
    </div>
  </section>
</template>

<script>
import pagination from '~/components/common/pagination';


export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogTableVisible2: false,
      currentPage: 1,
      pagesize: 10,
      total: 0,
      sideMenu: [],
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      ts: this.newStore(),
      // 分页相关
      group: 1, // 分组
      total: 0, // 数据总数
      num: 1, // 当前页
      limit: '30', // 每组有多少条数据
      // 用户管理相关
      userList: [], // 用户列表
      oneUserInfo: [], // 一条信息
      jigouList: [], // 机构信息
      userRoleList: [], // 用户角色信息
      showUser: true,

      showUserRole: false,
      checkedRid: [],
      check: '',
      rolerid: '',
      newUserId: '',
      newUserName: '',
      newUserSex: '',
      newUserAge: '',
      newUserJigou: '',
      newUserPosition: '',
      newUserEmail: '',
      newUserTel: '',
      newUserPwd: '',
      nowPid: '', // 用户当前pid
      showSubmit: false, // 显示提交按钮
      showXiugaiSubmit: false, // 显示提交修改按钮

      username: '',
      userjigou: '',
      usertel: '',
      // 控制增加修改提交按钮
      showFirstJigouSubmit: false,
      showSecondJigouSubmit: false,
      showmodifyJigouSubmit: false,
      showArea: true,
      showAddarea: false,
      showAddareaMore: false,
      newFirstJigou: '',

    };
  },
  created() {
    this.getSidemenu();
    this.getjigouList();
    this.getUserList(1);
  },
  computed: {
    // 用户修改
    male() {
      return this.newUserSex == '男';
    },
    female() {
      return this.newUserSex == '女';
    },
    // 计算页数
    pages() {
      const pages = [];
      this.userList.forEach((item, index) => {
        const page = Math.floor(index / 10);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
    // 计算总分组
    groups() {
      return Math.ceil(this.total / this.limit);
    },
  },
  components: {
    pagination,
  },
  methods: {
    handleCurrentChange() {
      this.getUserList();
    },
    resetmm(pid) {
      this.$confirm('确认重置密码为 123456?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEE5FB3EC2509558B252E72429DAE0C3217255FA5D50178A84',
          token: localStorage.getItem('token'),
          pid,
          passwords: '123456',
        };
        // return;
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '密码重置成功!',
          });
          this.getUserList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },

    getjigouList() {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouList = ts.d.data.operation2;
        this.newUserJigou = (this.jigouList[0].hash.orgname).replace(/;/g, '');
      });
    },
    // 分页相关
    // 点击页码，根据当前页获取数据
    pageListView(page) {
      this.num = page;
    },
    // 获取分组信息
    groupListView(msg) {
      this.group = msg.curgroup;
      this.num = msg.curpage;
      this.getUserList();
    },


    // 用户管理
    // 点击角色
    changeUserRole(pid) {
      // 获取该条信息
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.getUserRoleList(pid);
      });

      // 转到角色选择页

      this.dialogTableVisible2 = true;
    },
    submitUserRole(pid) {
      this.$confirm('确认修改?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEE5FB3EC2509558B2BF20AB417E7157D029DABAF7F819C4A4',
          token: localStorage.getItem('token'),
          pid,
          rid: this.RoleRids,
        };
        // return;
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'info',
            message: '修改成功!',
          });
          this.dialogTableVisible2 = false;
          this.getUserList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改',
        });
        this.dialogTableVisible2 = true;
      });
    },
    // 删除
    deleteUserItem(index, pid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B634939C64B2C857641',
          token: localStorage.getItem('token'),
          pid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'info',
            message: '删除成功!',
          });
          this.getUserList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 提交新增用户
    addNewUser() {
      if (this.newUserId == '') {
        this.$message({
          type: 'error',
          message: '请填写工号',
        });
        return;
      }
      if (this.newUserName == '') {
        this.$message({
          type: 'error',
          message: '请填写员工姓名',
        });
        return;
      }
      if (this.newUserJigou == '') {
        this.$message({
          type: 'error',
          message: '请选择机构',
        });
        return;
      }
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2372E1BF234D80FD9',
        token: localStorage.getItem('token'),
        userid: this.newUserId,
        cardid: '',
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        passwords: '123456',
        fax: '',
        position: this.newUserPosition,
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.$message({
          type: 'info',
          message: '添加成功!',
        });
        this.getUserList();
      });
      this.$nextTick(() => {
        this.goBackUser();
        this.dialogTableVisible = false;
      });
    },
    // 点击修改用户信息选项
    modifyUserInfo(pid) {
      this.showSubmit = false;
      this.showXiugaiSubmit = true;

      // 渲染单条信息
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        const item = this.oneUserInfo[0].hash;
        console.log(ts.d.data.operation1);
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.newUserTel = item.telephone;
        this.newUserJigou = item.dept;

        this.newUserPosition = item.position;
        this.nowPid = item.pid;

        this.showUser = false;
        this.showUserRole = false;
        this.showAdduser = true;

        this.dialogTableVisible = true;
      });
    },
    // 查看
    viewUserInfo(pid) {
      this.showSubmit = false;
      this.showXiugaiSubmit = false;

      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneUserInfo = ts.d.data.operation1;
        const item = this.oneUserInfo[0].hash;
        this.newUserId = item.userid;
        this.newUserName = item.username;
        this.newUserSex = item.sex;
        this.newUserAge = item.age;
        this.newUserEmail = item.email;
        this.newUserTel = item.telephone;
        this.newUserJigou = item.dept;

        this.newUserPosition = item.position;
        // this.newUserPwd = item.cardid;
        this.nowPid = item.pid;

        this.showUser = false;
        this.showUserRole = false;
        this.showAdduser = true;

        this.dialogTableVisible = true;
      });
    },
    // 提交修改用户信息
    modifyUserSubmit(pid) {
      console.log(this.newUserJigou);

      if (this.newUserId == '') {
        this.$message({
          type: 'error',
          message: '请填写工号',
        });
        return;
      }
      if (this.newUserName == '') {
        this.$message({
          type: 'error',
          message: '请填写员工姓名',
        });
        return;
      }
      if (this.newUserJigou == '') {
        this.$message({
          type: 'error',
          message: '请选择机构',
        });
        return;
      }
      const res = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B240E22335DEB9DA4F',
        token: localStorage.getItem('token'),
        pid,
        username: this.newUserName,
        sex: this.newUserSex,
        age: this.newUserAge,
        orgid: this.newUserJigou,
        email: this.newUserEmail,
        telephone: this.newUserTel,
        fax: 'tt',
      };
      this.spost(this.ts, '/mainservlet', res).then(() => {
        this.$message('修改成功！');
        this.getUserList();
      });
      this.goBackUser();
      this.dialogTableVisible = false;
    },


    // 获取用户列表(有筛选条件)
    getUserList() {
      // const end = parseInt(currentGroup) * parseInt(this.limit);
      // const start = end - parseInt(this.limit);
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B22FB6B751D0360763',
        token: localStorage.getItem('token'),
        username: this.username,
        telephone: this.usertel,
        dept: this.userjigou,
        limit: this.pagesize,
        start: (this.currentPage - 1) * 10,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userList = ts.d.data.operation1;
        this.total = Number(ts.d.data.operation2[0].hash.allrs);
      });
    },

    // 获取用户角色
    getUserRoleList(pid) {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B29019D3CEB065EB73',
        token: localStorage.getItem('token'),
        pid,
      };
      this.nowPid = pid;
      this.RoleRids = [];
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.userRoleList = ts.d.data.operation1;
        for (const i of this.userRoleList) {
          if (i.hash.pid.length > 0) {
            this.RoleRids.push(i.hash.rid);
          }
        }

        console.log(this.userRoleList);
      });
    },
    // 显示用户页
    goBackUser() {
      this.showAdduser = false;
      this.showUserRole = false;
      this.showUser = true;
    },
    // 显示添加/修改用户页
    goAddUser() {
      this.newUserId = '';
      this.newUserName = '';
      this.newUserSex = '';
      this.newUserAge = '';
      this.newUserJigou = '';
      this.newUserPosition = '';
      this.newUserEmail = '';
      this.newUserTel = '';
      this.newUserPwd = '';
      this.showUser = false;
      this.showUserRole = false;
      this.showAdduser = true;
      this.showSubmit = true;
      this.showXiugaiSubmit = false;
      this.dialogTableVisible = true;
    },
    // 显示到用户角色页
    goShowUserRole() {
      this.showUser = false;
      this.showUserRole = true;
      this.showAdduser = false;
    },


  },

};

</script>

